<!doctype html>
<html lang="en" class="orange-theme">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="Maxartkiller">

    <title>目录 ·辰星中文网</title>

    <!-- iconfont CSS -->
    <link rel="stylesheet" href="/static/mobile/vendor/iconfont/iconfont.css">

    <!-- Roboto fonts CSS -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet">

    <!-- Bootstrap core CSS -->
    <link href="/static/mobile/vendor/bootstrap-4.3.1/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="/static/mobile/css/style.css" rel="stylesheet">
</head>

<body>
<div class="wrapper">
    <div class="header">
        <div class="row no-gutters">
            <div class="col-auto">
                <a href="javascript:history.go(-1)" class="btn btn-link text-dark"><i class="iconfont icon-back"></i></a>
            </div>
            <div class="col text-left header-title">{$book.name}</div>
            <div class="col-auto">
<!--                <a class="btn btn-link text-dark">-->
<!--                    <i class="iconfont icon-search"></i>-->
<!--                </a>-->
            </div>
        </div>
    </div>
    <div class="container bg-white">
        <div class="d-flex justify-content-between p-2 align-items-center">
            <p class="mb-0"><b>共{$chapter_total}章</b></p>
            <i class="iconfont icon-shunxu dao"></i>
        </div>
        <div id="continer">
            <ul class="list-group">
                {volist name="chapter_list.free" id="free"}
                <li class="list-group-item" onclick="read('{$book.id}','{$free.index}')">
                    <a href="/mobile/chapter/read/book_id/{$book.id}/chapter_index/{$free.index}">{$free.name}</a>
                </li>
                {/volist}
            </ul>
            <ul class="list-group">
                {volist name="chapter_list.nofree" id="nofree"}
                <li class="list-group-item" onclick="read('{$book.id}','{$nofree.index}')">
                    <a href="/mobile/chapter/read/book_id/{$book.id}/chapter_index/{$nofree.index}" class="d-flex justify-content-between align-items-center">
                        <p class="mb-0">{$nofree.name}</p>
                        <i class="iconfont icon-suo1"></i>
                    </a>
                </li>
                {/volist}
            </ul>
        </div>
    </div>
    <input type="hidden" name="book_id" value="{$book.id}">
</div>


<!-- jquery, popper and bootstrap js -->
<script src="/static/mobile/js/jquery-3.3.1.min.js"></script>
<script src="/static/mobile/vendor/bootstrap-4.3.1/js/bootstrap.min.js"></script>

<!-- template custom js -->
<script src="/static/mobile/js/main.js"></script>

<!-- page level script -->
<script>
    $(function() {
        $('.icon-shunxu').click(function() {
            $('.icon-shunxu').toggleClass("dao");
            let cla = $(this).attr('class');
            let book_id = $('input[name="book_id"]').val();
            if(cla === 'iconfont icon-shunxu'){
                $.post('/mobile/book/chapterList',{'book_id':book_id},function(data){
                    var frees = '',no_frees = '';
                    //收费
                    for(var i=0;i<data.nofree.length;i++){
                        no_frees += '<li class="list-group-item"><a href="/mobile/chapter/read/book_id/'+book_id+'/chapter_index/'+data['nofree'][i]['index']+'" class="d-flex justify-content-between align-items-center"><p class="mb-0">'+data['nofree'][i]['name']+'</p><i class="iconfont icon-suo1"></i></a></li>';
                    }
                    //免费
                    for(var i=0;i<data.free.length;i++){
                        frees += '<li class="list-group-item"><a href="/mobile/chapter/read/book_id/'+book_id+'/chapter_index/'+data['free'][i]['index']+'">'+data['free'][i]['name']+'</a></li>';
                    }
                    $("#continer").html(no_frees+frees);
                });
            }else{
                let url = '/mobile/book/chapterList/book_id/'+book_id;
                window.location.replace(url)
            }
        })
    });
</script>
<script>
   function read(book_id,chapter_index){
       window.location.href='/mobile/chapter/read/book_id/'+book_id+'/chapter_index/'+chapter_index;
   }
</script>
</body>

</html>
